<template>
    <div>
        <ul>
            <li 
                v-for="item in list" 
                :key="item.id" 
                :class="seleteId === item.id ? 'color' : '' "
                @click="changeId(item.id)"
                >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    id:1,
                    name:'一句诗词'
                },
                {
                    id:2,
                    name:'励志句子'
                },
                {
                    id:3,
                    name:'毒鸡汤'
                },
            ],
            seleteId:1
        }
    },
    methods:{
        changeId(val){
            this.seleteId = val
        }
    }
}
</script>

<style scoped lang="scss">
    ul{
        margin-top: 30px;
    }
    li{
        cursor: pointer;
        list-style: none;
        text-align: center;
        font-size: 18px;
        color: #b8b8b8;
        margin-top: 10px;
    }
    .color{
        color: #4caf50;
    }
    li:hover{
        color: #4caf50;
    }
</style>